<template>
  <div id="id">
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>菜单</span>
            <el-button class="el-icon-delete menuStyle" style="margin-left:10px" plain type="danger" size="small" @click="deleteForm"> 删除</el-button>
            <el-button class="el-icon-edit menuStyle" plain type="primary" size="small" @click="Edit"> 编辑</el-button>
            <el-popover
              class="menuStyle"
              placement="top-start"
              width="170"
              trigger="hover"
            >
              <el-button type="primary" plain size="small" @click="topLevel(0)">顶级</el-button>
              <el-button type="primary" plain size="small" @click="topLevel(1)">子级</el-button>
              <el-button slot="reference" class="el-icon-plus menuStyle" plain type="success" size="small"> 添加</el-button>
            </el-popover>
          </div>
          <el-tree :data="data" :props="defaultProps" highlight-current @node-click="handleNodeClick"/>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card class="box-card">
          <div slot="header" class="clearfix"/>
          <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" status-icon class="demo-ruleForm">
            <el-form-item label="路径编码" prop="PathCode">
              <el-input v-model="ruleForm.PathCode" :disabled="disabledFrom" placeholder="请输入路径编码"/>
            </el-form-item>
            <el-form-item label="标题" prop="title">
              <el-input v-model="ruleForm.title" :disabled="disabledFrom" placeholder="请输入标题"/>
            </el-form-item>
            <el-form-item label="父级节点" prop="ParentNode">
              <el-input v-model="ruleForm.ParentNode" :disabled="disabledFrom" placeholder="请输入父级节点"/>
            </el-form-item>
            <el-form-item label="图标" prop="icon">
              <el-input v-model="ruleForm.icon" :disabled="disabledFrom" placeholder="请输入图标编码"/>
            </el-form-item>
            <el-form-item label="资源路径" prop="resourcePath">
              <el-input v-model="ruleForm.resourcePath" :disabled="disabledFrom" placeholder="请输入资源路径"/>
            </el-form-item>
            <el-form-item label="类型">
              <el-select :disabled="disabledFrom" v-model="ruleForm.type" style="width:100%;" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"/>
              </el-select>
            </el-form-item>
            <el-form-item label="排序" prop="sort">
              <el-input-number v-model="ruleForm.sort" :disabled="disabledFrom" :min="0" controls-position="right" @change="handleChange"/>
            </el-form-item>
            <el-form-item label="描述" prop="describe">
              <el-input v-model="ruleForm.describe" :disabled="disabledFrom" placeholder="请输入描述"/>
            </el-form-item>
            <el-form-item label="前端组件" prop="frontComponents">
              <el-input v-model="ruleForm.frontComponents" :disabled="disabledFrom" placeholder="请输入前端组件"/>
            </el-form-item>
            <el-form-item v-if="bottomFrom">
              <el-button v-if="dataStatus" type="primary" class="el-icon-plus" @click="submitForm('ruleForm',0)"> 添加</el-button>
              <el-button v-else type="primary" class="el-icon-edit" @click="submitForm('ruleForm',1)"> 编辑</el-button>
              <el-button class="el-icon-close" @click.native="cancelClone"> 取消</el-button>
              <!--<el-button @click="resetForm('ruleForm')">重置</el-button>-->
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { getMenu } from '@/api/menu'
export default {
  data() {
    return {
      ruleForm: {
        PathCode: '', // 路径编码
        title: '', // 标题
        ParentNode: '', // 父级节点
        icon: '', // 图标
        resourcePath: '', // 资源路径
        type: '', // 类型
        sort: '', // 排序
        describe: '' // 描述
      },
      options: [
        {
          value: 0,
          label: '目录'
        },
        {
          value: 1,
          label: '菜单'
        }
      ],
      disabledFrom: true, // 表单的状态
      bottomFrom: false, // 添加和取消按钮的状态
      rules: {
        PathCode: [
          {
            required: true,
            message: '请输入路径编码',
            trigger: 'blur'
          }
        ],
        title: [
          {
            required: true,
            message: '请输入标题',
            trigger: 'blur'
          }
        ],
        ParentNode: [
          {
            required: true,
            message: '请输入父级节点',
            trigger: 'blur'
          }
        ],
        icon: [
          {
            required: true,
            message: '请输入图标',
            trigger: 'blur'
          }
        ],
        resourcePath: [
          {
            required: true,
            message: '请输入资源路径',
            trigger: 'blur'
          }
        ],
        type: [
          {
            required: true,
            message: '请输入类型',
            trigger: 'blur'
          }
        ],
        sort: [
          {
            required: true,
            message: '请输入排序',
            trigger: 'blur'
          }
        ],
        describe: [
          {
            required: true,
            message: '请输入描述',
            trigger: 'blur'
          }
        ],
        frontComponents: [
          {
            required: true,
            message: '请输入前端组件',
            trigger: 'blur'
          }
        ]

      },
      data: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      dataId: ''
    }
  },
  created() {
    this.getTreeData()
  },
  methods: {
    handleNodeClick(data) {
      console.log(data)
      this.dataId = data.id
      this.cancelClone(1)
    },
    deleteForm() {
      if (this.dataId) {
        this.$confirm('此操作将永久删除菜单, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getTreeData()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      } else {
        this.$notify.info({
          title: '提示',
          message: '请选择删除的菜单!'
        })
      }
    },
    submitForm(formName, val) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (val === 0) { // 添加
            this.cancelClone()
            this.$notify.success({
              title: '添加成功',
              message: ''
            })
          } else { // 编辑
            this.$notify.success({
              title: '修改成功',
              message: ''
            })
            this.cancelClone()
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    handleChange(value) {
      // console.log(value);
    },
    cancelClone(val) {
      this.disabledFrom = true
      this.bottomFrom = false
      this.resetForm('ruleForm')
      if (!val) {
        this.getTreeData()
      }
    },
    topLevel(val) {
      if (val === 0) { // 添加顶级
        this.dataId = '' // 清空点击树形结构获取的id值
        this.addStatus()
      } else { // 添加子级
        if (this.dataId) {
          this.addStatus()
        } else {
          this.$notify.info({
            title: '提示',
            message: '请选择添加的菜单'
          })
        }
      }
    },
    Edit() {
      if (this.dataId) {
        this.addStatus()
        this.dataStatus = false
      } else {
        this.$notify.info({
          title: '提示',
          message: '请选择编辑的菜单'
        })
      }
    },
    addStatus() {
      this.disabledFrom = false
      this.dataStatus = true
      this.bottomFrom = true
      this.getTreeData()
    },
    getTreeData() {
      getMenu().then(response => {
        this.data = response.data
      })
    }
  }
}
</script>
<style scoped lang="scss">
    .menuStyle{
        float:right;
    }
    .clear{
        clear:both;
    }
    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }

    .box-card {
        width: 100%;
    }
</style>
